<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <link href="../bootstrap/bootstrap-5.3.8-dist/css/bootstrap.min.css"rel="stylesheet">
    <script src="../bootstrap/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="styles.css" type="text/css">
    <style>
        .btn-group { float: right; }
    body{background-image:url("bg.webp");
    background-size: cover;
    }
    .carousel-inner {
            max-width: 1200px; /* 最大宽度限制 */
            margin: 0 auto;   /* 居中显示 */
        }
    </style>
</head>
<body>
    <div class="btn-group">
        
        <a class="nav-link" href="login.html">
        <button type="button" class="btn btn-default" >登录</button>
        </a>
        <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">我喜欢的图片<span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
                <li><a href="#">图片1</a></li>
                <li><a href="#">图片2</a></li>
           </ul>
        </div>
    </div>
    
    <nav>
        <ul class="nav-list">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    
    <main>
        <h1><small>欢迎来到我的个人网站！</small></h1>
        <section class="grid-container"> 
            <article>项目一</article>
            <article>项目二</article>
            <article>项目三</article>
            <article>项目四</article>
            <article>项目五</article>
            <article>项目六</article>
        </section>
        <p class="text-primary"><strong>用文字留痕日常，盼与同频的你在此相逢。</strong></p>
        <p class="text-success"><strong>记录生活小确幸，分享我眼中的温柔世界。</strong></p>
        <p class="text-info"><strong>以网页为媒，传递热爱，静待知音。</strong></p>
        <p class="text-warning"><strong>收藏成长点滴，愿这里有你喜欢的温度。</strong></p>
        <p class="text-danger"><strong>书写细碎美好，盼与你共赴时光之约。</strong></p>
   
    </main>
    <div class="container mt-3">
        <table class="table table-hover ">
          <caption>该页面浏览人数</caption>
          <thead>
            <tr>
              <th>省份</th>
              <th>人数</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>北京</td>
              <td>0</td>
            </tr>
            <tr>
              <td>广东</td>
              <td>0</td>
            </tr>
          </tbody>
      </table>
   </div>	
</body>
<div id="carouselExampleIndicators" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
   </div>
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="1.jpeg" class="d-block w-100" alt="First slide">
     </div>
     <div class="carousel-item">
       <img src="2.jpeg" class="d-block w-100" alt="Second slide">
     </div>
     <div class="carousel-item">
       <img src="3.jpeg" class="d-block w-100" alt="Third slide">
     </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Previous</span>
   </button>
   <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Next</span>
   </button>
 </div>
</body>
</html>